const path=require('path');

module.exports={
    entry:{  //main.js  入口 文件
        main:["./src/main.js"]
    },
    mode:"development",
    output:{
        filename:"[name]-bundle.js",
        path:path.resolve(__dirname,'../dist'),
        publicPath:'/'
    },
    //本地服务器  运行自动打开 dist 文件里面的index.html
    devServer:{
        contentBase:'dist',
        overlay:true    //如果有错误信息就会在页面上显示  
    },
    module:{
        rules:[
            //css loader
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ]
            },
            //html loader
            {
                test:/\.html$/,
                use:[
                    {
                        loader:"file-loader",     //会给当前的html文件进行 起名 
                        options:{
                            name:"[name].html"
                        }
                    },
                    {
                        loader:'extract-loader' //将html文件与bundle.js文件进行分割
                    },{
                        loader:'html-loader',   //会查找.html 的文件
                        options:{
                            attrs:["img:src"]
                        }
                    }
                ]
            },
            //image loader
            {
                test:/\.(jpg|git|png)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'images/[name].[ext]'
                        }
                    }
                ]

            }
        ]
    }
}